/*
 * @Author: your name
 * @Date: 2020-05-20 17:09:06
 * @LastEditTime: 2020-10-25 19:45:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /yigo/src/Utils/CustomFlatList.js
 */ 
import React, { Component } from 'react'
import { Text, 
    View, 
    FlatList, 
    TouchableOpacity, 
    RefreshControl, 
    StyleSheet,  
} from 'react-native'



export default class CustomFlatList extends Component {
    static defaultProps = {
        data: []
    }

    constructor(props) {
        super(props)
        this.state = {
            over:false,        //是否到底线了
            clickIndex:null    //点击了显示更多还是 下拉刷新    1:显示更多  2:下拉刷新
        };   
    }

    componentWillReceiveProps(nextProps) {

        let str01 = this.props.data.length;
        let str02 = nextProps.data.length;
        let temp = Math.abs(str02 - str01)
        if (temp < pagecount) {
            
            this.setState({over:true})
        } else {
            this.setState({over:false})
        }

        if (str01 > str02) {
            this.setState({over:false})
        }
        if (this.state.clickIndex === 2) {
            this.setState({over:false})
        }
    }

    lookMoreClick() {
        let {lookMoreClick} = this.props
        this.setState({clickIndex:1},()=>{
            lookMoreClick()
        })
    }
    
    showMore = () => {   
        let {lookMoreClick, data, isLoading} = this.props
        if (isLoading) {
            return (
                <View style={{paddingTop:8,paddingBottom:8,justifyContent:'center', alignItems:'center'}}>
                   <Text>加载中...~~</Text>
               </View>
            );
            
        }
        if (data.length > 0) {
            if (this.state.over) {
                return (
                <View style={{paddingTop:8,paddingBottom:8,justifyContent:'center', alignItems:'center'}}>
                    <Text style={{color:'#808080'}}>我是有底线的~~</Text>
                </View>
                );
            }
            return (
                <TouchableOpacity onPress={this.lookMoreClick.bind(this)} style={{paddingTop:8,paddingBottom:8,justifyContent:'center', alignItems:'center'}}>
                        <Text>显示更多</Text>
                </TouchableOpacity>
            );
        }
        return null;
    }
    
    render() {
        let {isLoading, onRefresh, data} = this.props  
        return (
            <View style={{flex:1}}>
               <FlatList 
                   data={data}
                   ListEmptyComponent={this.enpty}
                   ListFooterComponent={this.showMore}
                   keyExtractor={this._keyExtractor} 
                //    refreshing={isLoading}
                //    refreshControl = {
                //        <RefreshControl
                //             title={'加载中...'}
                //             colors={['#808080']}//此颜色无效
                //             tintColor={'#808080'}
                //             titleColor={'#808080'}//只有ios有效
                //             refreshing={isLoading}
                //             onRefresh={()=>{
                //                 this.setState({clickIndex: 2},() => onRefresh() || null)
                //             }}
                //        />
                //    }
                   {...this.props}
                //    ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#DCDCDC'}}/>}
                   >
               </FlatList>
            </View>   
        )
    }
    enpty = () => {
        let { request } = this.props;
        if (this.props.isLoading) return <></>
        return (
                <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
                    <Text onPress={() => request || null}>暂无数据，重新刷新</Text>
                </View>            
        );
    }
    _keyExtractor = (item) => item.id;
}
